<!--赛务管理-->
<template>
  <div class="saiWuManagement">
    <componentsHeader></componentsHeader>
    <el-row class="saiWuManagementContent" style="width: 100%;">
      <el-col  class="routerLink">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/operationMenu">首页</el-breadcrumb-item>
          <el-breadcrumb-item to="/operationMenu">赛务管理</el-breadcrumb-item>
          <el-breadcrumb-item >{{checkTabIndex == 0?'实时统计':checkTabIndex == 1?'发布公示':checkTabIndex == 2?'延时设置':''}}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <div class="content">
        <el-aside>
          <el-row
            @click.native="checkTabIndex = i"
            v-for="(item,i) in tabList"
            :key="i+'a'"
            :class="[checkTabIndex==i?'checkStyle':'',]"
          >{{item.name}}
          </el-row>
        </el-aside>
        <el-row class="rightMain">
          <realTimeStatistic v-show="checkTabIndex==0"></realTimeStatistic>
          <announce v-if="checkTabIndex==1" @nextFn="nextFn"></announce>
          <delaySet v-if="checkTabIndex==2" :showDialog ='showDialog' ></delaySet>
        </el-row>
      </div>
    </el-row>
  </div>
</template>
<script>
    import { mapGetters, mapState } from "vuex";
    import componentsHeader from "@/components/header.vue";
    import realTimeStatistic from "./realTimeStatistic.vue"; //实时统计
    import announce from "./announce.vue"; //发布公示
    import delaySet from "./delaySet.vue"; //延时设置
    export default {
        data() {
            return {
                selfTrainingArr: [],
                Count: 0,
                checkTabIndex:0,
                tabList: [
                    {index: 0, name: "实时统计"},
                    {index: 1, name: "发布公示"},
                    {index: 2, name: "延时设置"},
                ],
                showDialog:false,
            };
        },
        mounted() {

        },
        methods: {
            nextFn() {
               this.checkTabIndex = 2;
               this.showDialog = true;
            }
        },
        watch: {
            selfTrainingList: {
                // handler(val, val2) {
                //     if (val.Data && val.Data.length > 0) {
                //         this.selfTrainingArr = val.Data.map(res => {
                //             res.CorrectPercent = parseInt(
                //                 (res.DoQuestionCount / res.TotalQuestionCount) * 100
                //             );
                //             return res;
                //         });
                //         this.Count = val.Count;
                //     } else {
                //         this.selfTrainingArr = [];
                //         this.Count = 0;
                //     }
                    // this.selfTrainingArr = val.Data;
                    // console.log(val);
                // }
            },
            userInfo: {
                handler(val, val2) {
                    // this.getselfTrainingList();
                }
            },
            checkTabIndex:{
                handler(val,oldVal) {
                    // console.log(val);
                    if(val == 1) {
                        this.showDialog = false;
                    }

                }
            }
        },
        computed: {
            ...mapGetters({
                // selfTrainingList: ["selfTraining/selfTrainingList"],
                userInfo: ["userInfo"]
            })
        },
        components: {
            componentsHeader,
            realTimeStatistic,
            announce,
            delaySet
        }
    };
</script>
<style lang='less'>
  .saiWuManagement {
    // min-width: 1100px;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    background: #f2f2f2;
    padding-bottom: 35px;
    box-sizing: border-box;
    p{
      margin-bottom: 0;
    }
    .saiWuManagementContent{
      .routerLink{
        float: unset;
        min-width: 1200px;
        width: 75%;
        margin: 0 auto;
        padding: 20px 0;
        font-size:14px;
        font-family:PingFangHK-Regular,PingFangHK;
        font-weight:400;
        color:rgba(102,102,102,1);
        .is-link{
          color:rgba(102,102,102,1);
          font-weight:400;
        }
      }
      .content{
        min-width: 1200px;
        width: 75%;
        margin: 0 auto;
        /*height: 100%;*/
        min-height: calc(100vh - 149px);
        display: flex;
        .el-aside{
          width: 200px !important;
          /*border: 1px solid #000;*/
          box-sizing: border-box;
          margin-right: 10px;
          background: #fff;
          border-radius: 4px;
          .el-row{
            text-align: center;
            line-height: 72px;
            border-bottom: 1px solid #f2f2f2;
            font-size:16px;
            font-family:PingFangHK-Regular,PingFangHK;
            font-weight:400;
            color:rgba(51,51,51,1);
            cursor: pointer;
          }
          .checkStyle{
            background: #01155C;
            color: #fff;
          }
        }
        .rightMain{
          width: 100%;
          /*height: 100%;*/
          /*border: 1px solid #000;*/
          border-radius: 4px;
          box-sizing: border-box;
          background: #fff;
        }
      }
    }


  }
</style>
